<template>
  <div class="mui-content">
    <swiper :options="swiperOption" ref="mySwiper" >

      <swiper-slide v-for="(page,index) in pages" :key="index">
<!--        <swiper-slide v-for="item in IconsList" :key="id">-->
          <ul class="mui-table-view mui-grid-view mui-grid-9">
            <router-link to="/Banner" v-for="item in IconList" :key="item.id" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
              <img class="icon-image" :src="item.imgUrl" alt="">
              <div class="mui-media-body">{{item.content}}</div></a></router-link>
            </ul>

      </swiper-slide>


    </swiper>
  </div>

</template>

<script>
    export default {
      props:{
        IconList:Array
      },
        name: "Homelcons",
        data(){
          return{

            swiperOption: {

            },

          }
      },
        computed:{
          //生成翻页页面
          pages(){
            //生成空数组用来动态存放两个轮播图的数据
            var pages=[];
            //使用forEach循环读取数组，根据输入的页数index来生成分页数组
            this.IconList.forEach((item,index)=>{
              //表示页数
              var page=Math.floor(index/10)
              if(!pages[page]){
                pages[page] = []
              }
              pages[page].push(item)
            })
            return pages
          }
        }
    }
</script>

<style scoped lang="stylus">
  .mui-content .mui-table-view
    margin-top 0

  .mui-content .mui-grid-view.mui-grid-9
    background white
    border 0
    .mui-table-view-cell
      border 0
        .mui-media-body
          margin-top 0
          text-align center
          font-size 50%
    .mui-col-xs-4
      width 20%

  .mui-content >>> .icon-image
    width 50%

  /*.mui-content .mui-grid-view.mui-grid-9 .mui-table-view-cell*/
    /*border 0*/
</style>
